<template>
  <div>
    <tableComponents :pagination="{ currentPage, pageSize: pagesize, total: list.all_num }" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" @sendUserSearch="getSearch" :searchData="userSearchData" :isHaveExport="false" @toAdd="add_cate">
      <template v-slot:table>
        <el-table ref="multipleTable" :data="list.data" v-loading="loading" stripe header-row-class-name="head_color" tooltip-effect="dark" style="width: 99.8%" row-key="id" @selection-change="handleSelectionChange">
          <el-table-column type="selection" class="tc" width="35"></el-table-column>
          <el-table-column prop="sort" sortable :sort-method="sorta" label="排序" min-width="80" width="80">
            <template slot-scope="scope">
              <el-input @change="sortNew(scope.$index, scope.row)" v-model.number="scope.row.sort" size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="名称" min-width="80">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>
          <el-table-column prop="picture" header-align="center" align="center" width="280px" label="图片">
            <template slot-scope="scope">
              <el-popover placement="right" title trigger="hover">
                <img :src="scope.row.piclink.split('@')[0]" style="width: 500px" />
                <img slot="reference" :src="scope.row.piclink.split('@')[0]" :alt="scope.row.piclink.split('@')[0]" style="width: 100px" />
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column label="信息" min-width="150">
            <template slot-scope="scope">
              <div>
                <span>省市区：</span>
                <small>{{
                  scope.row.province + scope.row.city + scope.row.town
                }}</small>
                <br />
                <span>详细地址：</span>
                <small>{{ scope.row.add }}</small>
                <br />
                <span>人数:</span>
                <small>{{ scope.row.people || "~~" }}</small>
                <br />
                <span>天数:</span>
                <small>{{ scope.row.day || "~~" }}</small>
                <br />
                <span>金额:</span>
                <small>{{ parseFloat(scope.row.money).toFixed(2) || "~~" }}</small>
                <br />
                <span>经纬度:</span>
                <small>{{ scope.row.latitude }},{{ scope.row.longitude }}</small>
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="是否显示" min-width="130" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch class="zdySwith" :width="82" v-model="scope.row.show" active-color="#13ce66" inactive-color="#ffffff" active-text="显示" inactive-text="不显示" active-value="1" @change="getIskeck($event, scope.row)" inactive-value="0"></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="addxq(scope.row)">详情</el-button>
              <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="add_cate(scope.row)">编辑</el-button>
              <el-button :loading="$store.state.isLoading" size="mini" type="danger" @click="deleteNew(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-slot:footerLeft>
        <a class="aBtn aBtn_1 aBtn_lan2" @click="delSelection()">删除</a>
      </template>
    </tableComponents>

    <el-dialog :close-on-click-modal="false" title="详情" class="tl size_13" width="1200px" :destroy-on-close="true" :visible.sync="dialogaddVisibleFloor">
      <el-form :model="edit_form" ref="form" class="tl size_13" :label-width="formLabelWidth">
        <el-form-item label="活动标题：">
          <el-col :span="6">
            {{edit_form.initiator}}
          </el-col>
          <el-col :span="3">
            活动费用：
          </el-col>
          <el-col :span="6">
            {{edit_form.money | keepTwoNum}}元
          </el-col>
        </el-form-item>
        <el-form-item label="选择活动团期：">
          <el-radio-group v-model="radio2" size="small" @change="changeTab">
            <el-radio-button :label="item.id" v-for="(item,index) in chooseTime" :key="index">{{item.signup_time | getTimeFormat}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="已报名人数：">
          {{edit_form.yi_people}}人
        </el-form-item>
        <!-- <el-form-item> -->

        <el-table ref="multipleTable" :data="moneylist" border tooltip-effect="dark" style="width: 100%">
          <el-table-column label="用户昵称" min-width="50">
            <template slot-scope="scope">{{ scope.row.username }}</template>
          </el-table-column>

          <el-table-column label="报名时间" min-width="50">
            <template slot-scope="scope">{{ scope.row.signup_time | getTimeFormat}}</template>
          </el-table-column>

          <el-table-column label="姓名" min-width="50">
            <template slot-scope="scope">{{ scope.row.nickname }}</template>
          </el-table-column>

          <el-table-column label="身份证号码" min-width="50">
            <template slot-scope="scope">
              {{ scope.row.card }}
            </template>
          </el-table-column>

          <el-table-column label="手机号码" min-width="50">
            <template slot-scope="scope">{{ scope.row.tel}}</template>
          </el-table-column>

          <el-table-column label="订单号" min-width="50">
            <template slot-scope="scope">
              {{ scope.row.oid }}
            </template>
          </el-table-column>
        </el-table>

        <!-- </el-form-item> -->
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
import uploadpic from "@/components/page/pic/up_pic";
import cityCascader from "@/components/currency/cityCascader/cityCascader";
import { dzSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  name: "cate",
  data() {
    return {
      loading: false,
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      formLabelWidth: "120px",
      searchAll: {},
      userSearchData: dzSearchData,
      editId: "", //判断是编辑还是新增
      multipleSelection: "", //多选删除
      effective_time: "", //时间
      JWD: "", //经纬度
      list: [],
      plad: "",
      selectedOptions: [],
      // 上面是必备的
      edit_form: {
        title: "",
      },
      dialogaddVisible: false,
      title: "",
      dialogaddVisibleFloor: false,
      parent_id: "",
      chooseTime: [],
      radio2: "0",
      moneylist: [],
    };
  },
  components: {
    uploadpic,
    cityCascader,
  },
  created() {
    this.getNewsAll(this.searchAll);
  },
  methods: {
    get() {
      if (this.chooseTime.length > 0 && this.chooseTime) {
        if (this.radio2 == 0) {
          var params = {};
          params.id = this.edit_form.id;
          params.select_date = this.chooseTime[0].signup_time;
          this.$api.getDz.order_product(params).then((res) => {
            if (res.data.code == 200) {
              this.moneylist = res.data.result;
            }
          });
        }
      }
      // this.$refs.checkAll.delCheckedAll();
    },
    changeTab() {
      var params = {};
      params.id = this.edit_form.id;
      params.select_date = this.chooseTime[this.radio2].signup_time;
      this.$api.getDz.order_product(params).then((res) => {
        if (res.data.code == 200) {
          this.moneylist = res.data.result;
        }
      });
    },
    addxq(val) {
      if (val) {
        this.chooseTime = [];
        this.edit_form = JSON.parse(JSON.stringify(val));
        this.edit_form.select_date = JSON.parse(this.edit_form.select_date);
        for (let i in this.edit_form.select_date) {
          this.chooseTime.push({
            id: i || 0,
            signup_time: this.edit_form.select_date[i].signup_time,
          });
        }
        this.get();
        console.log(this.chooseTime);
      } else {
        this.edit_form = {};
      }
      this.dialogaddVisibleFloor = true;
    },
    // 地址
    handleChange(value) {
      if (value) {
        for (var i = 0; i < value.length; i++) {
          if (i == 0) this.edit_form.province = value[i];
          if (i == 1) this.edit_form.city = value[i];
          if (i == 2) this.edit_form.area = value[i];
          if (i == 3) this.edit_form.town = value[i];
        }
      }
    },
    // 审核
    getIskeck(val, row) {
      var params = {};
      params = row;
      params.show = val;
      this.$api.getDz.friends_activities_saveedit(params).then((res) => {
        if (res.data.code == 200 && res.data.result) {
          this.getNewsAll(this.searchAll);
        } else {
          this.getNewsAll(this.searchAll);
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    //排序
    sorta(a, b) {
      return b - a;
    },
    sortNew(index, row) {
      var params = {};
      params = row;
      params.sort = row.sort;
      this.$api.getDz.friends_activities_saveedit(params).then((res) => {
        if (res.data.code == 200 && res.data.result) {
          this.getNewsAll(this.searchAll);
        } else {
          this.getNewsAll(this.searchAll);
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    //新增和编辑
    add_cate(val) {
      if (val) {
        sessionStorage.setItem("title", this.$store.state.title);
        sessionStorage.setItem("parentTitle", this.$store.state.parentTitle);
        let routeData = this.$router.resolve({
          path: "/index/page/activity_edit",
          query: { id: val.id },
        });
        window.open(routeData.href, "_blank");
      } else {
        sessionStorage.setItem("title", this.$store.state.title);
        sessionStorage.setItem("parentTitle", this.$store.state.parentTitle);
        let routeData = this.$router.resolve({
          path: "/index/page/activity_edit",
        });
        window.open(routeData.href, "_blank");
      }
      // this.dialogaddVisible = true;
    },
    subInfo() {
      var JWD = this.JWD;
      var jwd_ar = JWD.split(",");
      if (this.edit_form.id) {
        this.$api.getDz.edit_market_lists(this.edit_form).then((res) => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("修改成功");
            this.dialogaddVisible = false;
            this.getNewsAll(this.searchAll);
          } else {
            this.$fnc.alertError(res.data.result);
            this.getNewsAll(this.searchAll);
          }
        });
      } else {
        this.edit_form.longitude = jwd_ar[1]; //经度
        this.edit_form.latitude = jwd_ar[0]; //纬度
        this.$api.getDz.saveadd_market_lists(this.edit_form).then((res) => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("添加成功");
            this.dialogaddVisible = false;
            this.getNewsAll(this.searchAll);
          } else {
            this.$fnc.alertError(res.data.result);
            this.getNewsAll(this.searchAll);
          }
        });
      }
    },

    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      data.page = data.page || 1;
      data.page_size = data.page_size || 10;
      params = data;
      this.$api.getDz.friends_activities(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
          this.loading = false;
        } else {
          this.$fnc.alertError(res.data.result);
          this.loading = false;
        }
      });
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange(size) {
      //每页下拉显示数据
      var params = this.searchAll;
      params.page = "1";
      params.page_size = size;
      this.getNewsAll(params);
      this.pageSize = size;
    },
    deleteNew(id) {
      //删除
      this.$swal({
        title: "您确定要删除这些信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          this.$api.getDz.friends_activities_del({ id_str: id }).then((res) => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getNewsAll(this.searchAll);
            } else {
              this.$swal("删除失败！", res.data.result, "error");
              this.getNewsAll(this.searchAll);
            }
          });
        }
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    handleSelectionChange(val) {
      //多选框赋值
      this.multipleSelection = val;
    },
    delSelection() {
      //删除
      this.$swal({
        title: "您确定要删除所选信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var str = "";
          for (var i in this.multipleSelection) {
            str += this.multipleSelection[i].id + "@";
          }
          str = str.slice(0, -1);
          var data = { id_str: str };
          this.$api.getDz.friends_activities_del(data).then((res) => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了所选信息。", "success");
              this.getNewsAll();
            } else {
              this.$swal("删除失败！", "出错啦！", "success");
            }
          });
        }
      });
    },
    onSuccess(pic) {
      // 图片
      this.edit_form.piclink = pic;
    },
    add_floor(val, str) {
      if (str == "edit") {
        this.title = val.title;
        this.editId = val.id;
      } else {
        this.title = "";
        this.editId = "";
      }
      this.parent_id = val.id;
      this.dialogaddVisibleFloor = true;
    },
    subFloor() {
      var params = {};
      params.title = this.title;
      if (this.editId != "") {
        params.id = this.editId;
        this.$api.getDz.edit_market_lists(params).then((res) => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("修改成功");
            this.dialogaddVisibleFloor = false;
            this.getNewsAll(this.searchAll);
          } else {
            this.$fnc.alertError(res.result);
            this.getNewsAll(this.searchAll);
          }
        });
      } else {
        params.parent_id = this.parent_id;
        this.$api.getDz.saveadd_market_lists(params).then((res) => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("添加成功");
            this.dialogaddVisibleFloor = false;
            this.getNewsAll(this.searchAll);
          }
        });
      }
    },
  },
};
</script>
<style scoped>
.vide0-con {
  background-color: transparent !important;
  border: none;
  box-shadow: none;
  width: 600px;
}
.vide0-con .el-dialog__header {
  display: none;
}
</style>
